<style lang="scss" scoped>
    @import '../../css/resource.scss';
    .audio-box{
        padding: 0 28px 15px;
        width:100%;
        height: 400px;
        box-sizing: border-box;
    }

</style>
<style>
.vjs_video_3-dimensions {
        width:100%;
        height:400px;
}

.vjs-custom-skin>.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1.5em;
    margin-top: -1em;
    background-color: rgba(0,0,0,.45);
    font-size: 3.5em;
    height: 2em!important;
    line-height: 2em!important;
    margin-top: -1em!important
}
</style>
<template>

    <section>
        <section class="book-nav clearfix">
            <el-breadcrumb separator=" > " class="fl">
                <el-breadcrumb-item >资源管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/resource/my-resource'}">我的资源</el-breadcrumb-item>
                <el-breadcrumb-item ><span @click="gotoBackPage">{{tabName}}</span></el-breadcrumb-item>
                <el-breadcrumb-item >详情</el-breadcrumb-item>
            </el-breadcrumb>
        </section>

        <section class="course-ctaudio mt">
            <h3 class="ctvideo-title fs-16">{{title}}</h3>
            <div class="audio-box">
                <video-player  class="vjs-custom-skin"
                    ref="videoPlayer"
                    :options="playerOptions"
                    :playsinline="true"
                    customEventName="customstatechangedeventname"

                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @ready="playerReadied">
                </video-player>
            </div>
        </section>

        <div class="mt ctvideo-info">
            <h6 class="fs-14 vinfo-title">简介</h6>
            <div class="vinfo-des break-word">
                <p class="mt fs-14" v-html="abstract"></p>
            </div>
        </div>

    </section>

</template>

<script>

    import qs from 'qs'
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'

    export default{
        data: function(){
            return {
                tabName:this.$route.query.TabName||'',
                resUrl:this.$route.query.resUrl,
                title:this.$route.query.title,
                abstract:'',
                width:0,
                uploadFlag:this.$route.query.uploadFlag||0,
                playerOptions: {
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    height: 385,
                    sources: []
                }
            }
        },
        mixins: [mixinMethods],
        components: {
            videoPlayer
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },

        methods: {
            gotoBackPage(){
                history.go(-1)
            },

            onPlayerPlay(player) {

            },

            onPlayerPause(player) {

            },

            // or listen state event
            playerStateChanged(playerCurrentState) {

            },

            // player is ready
            playerReadied(player) {

            }
        },
        mounted: function(){
            if(this.uploadFlag==1){
                axios.post('/api/system/getFullUrl', qs.stringify({
                    fileObject:JSON.stringify([{url:this.resUrl,param:''}])
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        let iarr = this.$route.query.resUrl.split('.')
                        this.resUrl = d.data.url;
                        this.playerOptions.sources.push({
                            type: "video/" + iarr[iarr.length-1],
                            src: this.resUrl
                        })

                    }else {
                        this.$message.error(d.msg)
                    }
                });
            }

            this.playerOptions.width = document.getElementsByClassName('audio-box')[0].offsetWidth - 56
            this.abstract = sessionStorage.getItem('courseInfoAbstract')


        }
    }


</script>
